<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn1 = document.getElementById('btn1');
            var box1 = document.getElementById("box1");

            btn1.onclick  = function (){
                //clientWidth: 浏览器可见宽度，包括内容区和内边距，不带px的，这些属性都是只读的
                //clientHeight: 浏览器可见高度，包括内容区和内边距，不带px的，这些属性都是只读的
                //offsetWidth: 浏览器可见宽度，包括内容区和内边距，带px的
                //offsetHeight: 浏览器可见高度，包括内容区和内边距，带px的
                //offsetParent: 获取当前元素的定位父元素
                alert(box1.clientWidth)
                alert(box1.offsetWidth)
            }
        }
    </script>
</head>

<body>
<button id="btn1">点击</button>
<br/>
<div id="box1">
</div>
</body>

<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

</html>
